import React, { Component } from 'react';
// import { Route, Switch, Redirect } from 'react-router-dom';
import GlobalNav from '@/components/base/GlobalNav';
import Footer from '@/components/base/Footer';
import { Carousel } from 'antd';
import { Link } from 'react-router-dom';
import './home.scss';
import Popular from '@/components/home/child/Popular';
import Recipes from '@/components/home/child/Recipes';
import Menu from '@/components/home/child/Menu';
import Follow from '@/components/home/child/Follows';
import Nav from '@/components/home/child/Nav';
import Ingredients from '@/components/home/child/Ingredients';
// import Axios from 'axios';
// require('./mock.js')
import $ from 'jquery';

class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pop: '',
      names: '',
      list: []
    }
  }
  componentDidMount () {
    let uidt = JSON.parse(localStorage.getItem('uid'))
    let username = JSON.parse(localStorage.getItem('username'))  
    let name = JSON.parse(localStorage.getItem('names')) 
    this.setState({
      names: name
    }) 
    console.log(uidt,username,name)  
    if (uidt == null) {
      $(".Rightsidebar_NoLogin").css("display","block")
      $(".Rightsidebar_LoginTop").css("display","none")
    } else {
      $(".Rightsidebar_NoLogin").css("display","none")
      $(".Rightsidebar_LoginTop").css("display","block")
    }

    let f_type = '月度最佳';
    $('.menu-page-title').empty().append(f_type)
    let type = JSON.stringify(f_type)
    fetch(`https://sun.daxunxun.com/api/food/type?f_type=`+type)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        pop: data
      })
    })
  }
  render () {
    let usernames = this.state.names
    let foodlist = this.state.pop
    let att = []
    for(let i in foodlist){
      if( i < 5) {
        let fid = foodlist[i].f_id
        att.push(
          <div key={foodlist[i].f_id}><Link to ={{pathname:'/detail/'+fid}}><img src={ foodlist[i].banner } /></Link></div>
        )
      }
      
    }
    return (
      <div className="container">
        <div className="header">
          <GlobalNav {...this.props} />
        </div>
        <div className="section">
          <Nav {...this.props}/>
          <div className="Home_content">
            <div className="Home_slideshow">
              <Carousel autoplay>
                {
                  att
                }
              </Carousel>
            </div>
            {/* 新秀菜谱中间模块 */}
            <Recipes {...this.props}/>
            {/* 流行模块 */}
            <Popular {...this.props}/>
            {/* 时令食材模块 */}
            <Ingredients {...this.props} />
          </div>
          <div className="Home_Rightsidebar">
            <div className="Home_Rightsidebar_Login">
            {/* 未登录 */}
              <div className="Rightsidebar_NoLogin">
                <ul>
                  <li><Link to="/login" className="iconfont icon-qq"> QQ登录</Link></li>
                  <li><Link to="/login" className="iconfont icon-weibo">微博登录</Link></li>
                </ul>
                <div className="Rightsidebar_NoLogin_phone">
                  <Link to="">手机/邮箱登录</Link>
                  <span>|</span>
                  {/* <img src={require('./../../img/Rightsidebar_Login.jpg')} alt="" /> */}
                  <Link to="/register">注册</Link>
                </div>
              </div>
              {/* 已登录 */}
              <div className="Rightsidebar_LoginTop">
                <div className="Rightsidebar_Login">
                  {/* <span className="iconfont icon-chushimao"></span> */}
                  <img src="http://b-ssl.duitang.com/uploads/item/201603/26/20160326232537_Cz4mZ.jpeg" alt="" />
                <h3> <Link to="/mine"> { usernames }的厨房</Link></h3>
                <ul className="Login_list">
                  <li>
                    <Link to="/mine/collection">收藏</Link>
                  </li>
                  <li>
                    <Link to="/mine/cookde">作品</Link>
                  </li>
                  <li>
                    <Link to="/mine/cookbook">菜谱</Link>
                  </li>
                  <li>
                    <Link to="/mine/draft">草稿箱</Link>
                  </li>
                </ul>
                <button ><Link to="/mine/menu">创建菜单</Link></button>
              </div>
              </div>
              <div className="Rightsidebar_Login_Report">
                <Link to="">网上不良信息举报专区</Link>
              </div>
            </div>
            <div className="Home_Rightsidebar_Popular">
              <h1>流行搜索</h1>
              <ul>
                <li><p>1</p><Link to=""><span>雪花酥</span></Link><em></em></li>
                <li><p>2</p><Link to=""><span>红烧肉</span></Link><em></em></li>
                <li><p>3</p><Link to=""><span>可乐鸡翅</span></Link><em></em></li>
                <li><p>4</p><Link to=""><span>豆腐</span></Link><em></em></li><Link to=""></Link>
                <li><p>5</p><Link to=""><span>糖醋排骨</span></Link><em></em></li>
              </ul>
              <ul>
                <li><p>6</p><Link to=""><span>蛋挞</span></Link><em></em></li>
                <li><p>7</p><Link to=""><span>圣诞蛋糕</span></Link><em></em></li>
                <li><p>8</p><Link to=""><span>牛轧糖11</span></Link><em></em></li>
                <li><p>9</p><Link to=""><span>披萨</span></Link><em></em></li>
                <li className="Home_Rightsidebar_Popular_zh"><p>10</p><Link to=""><span>牛肉</span></Link><em></em></li>
              </ul>
            </div>
            {/* 新秀--右侧 */}
            <Menu {...this.props}/>
            {/* 厨友 */}
            <Follow />
          </div>
        </div>
        <div className="foot">
          <Footer />
        </div>
      </div>
    )
  }
}

export default Com;
